<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAddUpdate()" v-repeatClick>添加</el-button>
      <el-button @click="handleBeforeUpdate" v-repeatClick>修改</el-button>
      <el-button @click="enabled(false)">禁用</el-button>
      <el-button @click="enabled(true)">启用</el-button>
      <el-button @click="view" v-repeatClick>查看</el-button>
      <el-button @click="getBanner" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delBanner" v-repeatClick>删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <el-card  style="flex: 1;">
      <div class="app-page">
        <!-- 列表区 -->
        <div style="flex: 1">
          <el-table
            height="100%"
            :data="data"
            border
            stripe
            highlight-current-row
            ref="multipleTable"
            @row-dblclick="handleRowDbclick"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="index" width="55" align="center">
            </el-table-column>
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column label="广告图片" prop="orderCode" >
              <template slot-scope="scope">
                <el-image style="width: 200px; height: 100px"
                          :src="getImagePath(scope.row.imagePath)"
                          >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="广告标题" prop="orderCode" >
              <template slot-scope="scope">
                <el-link @click="handleRowDbclick(scope.row)">{{ scope.row.content }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="orderNo" label="广告序号" sortable></el-table-column>
            <el-table-column prop="linkUrl" label="活动链接" ></el-table-column>
            <el-table-column label="启用" prop="enabled" align="center" >
              <template slot-scope="scope">
                <span style="font-size: 20px">
                  <i
                    class="el-icon-circle-check"
                    style="color: #67c23a"
                    v-if="scope.row.enabled"
                  ></i>
                  <i
                    class="el-icon-circle-close"
                    style="color: #f56c6c"
                    v-else
                  ></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              sortable
              prop="createTime"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <!-- 添加修改零售预购单信息 -->
    <el-dialog
      v-dialog-drag
      :title="title + '广告'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="700px"
      @close="restForm"
    >
      <el-form
        size="small"
        :model="baseForm"
        label-position="left"
        label-width="100px"
        ref="baseForm"
        :rules="baseFormRules"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="title" label="广告标题">
              <el-input v-model="baseForm.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="content" label="广告内容">
              <el-input v-model="baseForm.content"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="imagePath" label="广告图片" >
              <upload-image :images="baseForm.imagePath" :is-multiple="false"></upload-image>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="orderNo" label="广告序号">
              <el-input v-model.number="baseForm.orderNo" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="linkUrl" label="活动链接">
              <el-input v-model="baseForm.linkUrl"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" >
          <el-col :span="24" style="text-align: right">
            <el-form-item>
              <el-checkbox v-model="baseForm.enabled">是否启用</el-checkbox>
              <el-button style="margin-left: 10px" @click="restForm">重置</el-button>
              <el-button type="primary" @click="submit" v-if="title!='查看'">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>


//零售预购单基本信息表单
let baseForm = {
  id:0,
  title:'',
  content:'',
  imagePath:[],
  orderNo:'',
  linkUrl:'',
  enabled:true,
};

import myHeader from "@/components/pageHEader/pageHeader";
import uploadImage from '../parts/components/uploadImage'
import {
  getBanner,
  addBanner,
  delBanner,
  modBanner,
  disableOrEnableBanner
} from "@/api/wx/banner";
import {getImage} from '@/api/common'
export default {
  name: "purchase",
  components: {
    myHeader,
    uploadImage
  },
  data() {
    return {
      data: [],
      //表格选中
      multipleSelection: [],
      //对话框
      dialogFormVisible: false,
      title: "添加",
      baseForm:{},
      baseFormRules:{
        title: [this.$RegExp.required()],
        content: [this.$RegExp.required()],
        pic: [this.$RegExp.required()],
      },
      baseFormOptions:{
        purchaseLocation:[],
        allGoods:[]
      },
    };
  },
  created() {

  },
  mounted() {
    this.getBanner();
    this.baseForm = this.cloneObj(baseForm)
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getBanner()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getBanner()
    },
    getImagePath(path){
      return getImage(path)
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.baseForm) this.$refs.baseForm.resetFields();
      });
    },
    handleBeforeUpdate(){
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    handleAddUpdate(row) {
      //修改处理
      if (row) {
        this.title = "修改";
        this.handleModform(row, this.baseForm);
        this.baseForm.imagePath = [this.baseForm.imagePath]
        this.dialogFormVisible = true;
      } else {
        this.baseForm = this.cloneObj(baseForm);
        this.title = "添加";
        this.dialogFormVisible = true;
      }
    },
    getBanner() {
      getBanner().then((resp) => {
        this.data =  resp.data
        this.total = resp.data;
      });
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    submit() {
      this.$refs["baseForm"].validate((valid) => {
        if (valid) {
          let submit = this.cloneObj(this.baseForm)
          let request;
          if (this.title == "添加") {
            request = addBanner(submit);
          } else {
            request = modBanner(submit);
          }
          submit.imagePath = submit.imagePath[submit.imagePath.length-1]
          request.then((resp) => {
            this.$message.success(resp.message || "成功");
            this.dialogFormVisible = false;
            this.getBanner();
          });
        }
      });
    },
    //查看零售预购单信息
    view() {
      this.handleBeforeUpdate();
      this.title = '查看'
    },
    //启用或禁用
    enabled(enabled) {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      let ids = this.multipleSelection.map((item) => item.id);
      let tip;
      if (enabled) {
        tip = "此操作将启用广告, 是否继续?";
      } else {
        tip = "此操作将禁用广告, 是否继续?";
      }
      this.confirm(tip).then(() => {
        disableOrEnableBanner(ids,{enabled}).then((resp) => {
          this.$message.success(resp.message || "成功");
          this.getBanner();
        });
      });
    },
    //删除零售预购单信息
    delBanner() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        delBanner(this.multipleSelection.map((item) => item.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getBanner();
          }
        );
      });
    },

  },
};
</script>

<style scoped lang='scss'>
.tdItem {
  line-height: 25px;
}
</style>

